/**
 *
 * @author zhangzhijie
 * @date 2021/8/9
 */
import mixin from "../mixins/mixin";
import {Fragment} from "vue";

export default {
  name: "f-column-toggle",
  mixins: [mixin],
  props: {
    config: {
      type: Object,
    },
  },
  data() {
    return {
      visible: false,
      // data:[],
      value: []
    };
  },
  computed: {
    columns() {
      let {columns = []} = this.config || {};
      return columns.filter(v => !v.hide || v._$tableKey).map(v => ({
        key: v.field,
        label: v.label,
        disabled: false,
      }));
    }
  },
  methods: {
    /**
     * 弹出表格列显隐
     */
    showColumnToggle() {
      this.visible = true;
    },
    handleChange(keys, e) {
      let {columns = []} = this.config;
      let showIndexList = [];
      let hideIndexList = [];
      let fields = this.columns.map(column => column.key);
      columns.forEach((column, i) => {
        let {field} = column;
        if (fields.includes(field)) {
          column._$tableKey = true;
          if (keys.includes(field)) {
            hideIndexList.push(i);
          } else {
            showIndexList.push(i);
          }
        }
      });
      this.$emit("columnToggle", {showIndexList, hideIndexList});
    }
  },
  render() {
    return (
      <Fragment>
        <el-tooltip effect="dark" content="表格列显隐" placement="top">
          <el-button class="f-r" icon="Menu" circle onClick={this.showColumnToggle}/>
        </el-tooltip>
        <el-dialog width="610px" v-model={this.visible} title="显示/隐藏">
          <el-transfer titles={['显示', '隐藏']} vModel={this.value} data={this.columns}
                       onChange={this.handleChange}/>
        </el-dialog>
      </Fragment>
    );
  }
};
